<template>
  <ContentBox has-corner class="community-category">
    <ContentBoxTitle title="小区分类" />
    <div class="community-category__content">
      <Pie
        :color="['#FA6D64', '#D5B13B', '#3BD5B3', '#A177FF']"
        :length="24"
        :length2="12"
        circle1-radius="128"
        circle2-radius="144"
        circle3-radius="160"
        :list="list"
        :canvas-width="360"
        :canvas-height="220"
        pie-radius="50px"
      />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import Pie from '@/components/Pie/Index.vue'
export default {
  name: 'CommunityCategory',
  components: {
    ContentBox,
    ContentBoxTitle,
    Pie
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
.community-category {
  width: $base * 360px;
  height: $base * 230px;

  .content-box-title__content {
    width: $base * 300px;
  }

  .community-category__content {
    margin-top: $base * -45px;
  }

  .pie {
    padding-top: 0;
  }
}
</style>